<template>
  <div>
    <div>aa</div>
    <input type="text">
    <div>aa</div>
    <div>aa</div>
    <div>aa</div>
    <div>aa</div>
    <div>aa</div>
    <dropdown>
      <div slot="fa">
        <div class="input">{{mapType[query.name]}}</div>
      </div>
      <div slot="child">
        <div class="popper">
          <div @click="query.name = 1">a</div>
          <div @click="query.name = 2">b</div>
          <div @click="query.name = 3">c</div>
          <div @click="query.name = 4">d</div>
        </div>
      </div>
    </dropdown>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <dropdown>
      <div slot="fa">
        <div class="input">aaa</div>
      </div>
      <div slot="child">
        <div class="popper">
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
          <div>bbb</div>
        </div>
      </div>
    </dropdown>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
  </div>
</template>

<script>  
  import dropdown from './dropdown.vue'
  const mapType = {
    1: 'a',
    2: 'b',
    3: 'c',
    4: 'd'
  }
  export default {
    data () {
      return {
        mapType: mapType,
        query: {
          name: 1
        }
      }
    },
    components: {
      dropdown
    }
  }
</script>

<style>
  .input{
    border:1px solid gray;
    width:100px;
  }
  .popper{
    width: 100px;
    border:1px solid gray;
    background: white;
  }
  .popper>div:hover{
    background: lightblue;
  }
</style>